//点击开始游戏 ->动态生成100小格 -->100div
//leftclick 没有雷 -->显示数字 (代表以当前为中心，周围8个格的雷数
//	由雷 gameover
//扩散  当前周围8个格没有雷，显示空
//rightclick 标记<->取消标记 标记是否正确，10个都正确，提示成功
//已经出现数字有效果

var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var flagBox = document.getElementById('flagBox');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var score = document.getElementById('score');
var minesNum;
var mineOver;
var block;
var minMap = [];
bindEvent();

function bindEvent() {
	startBtn.onclick = function() {
		box.style.display = 'block';
		flagBox.style.display = 'block';
		init();
	}
	box.oncontextmenu = function() {
		return false;
	}
	box.onmousedown = function(e) {
		var event = e.target;
		if(e.which == 1) {
			leftClick(event);
		} else if(e.which == 3) {
			rightClick(event);
		}
	}
	
	closeBtn.onclick = function(){
		alertBox.style.display = 'none';
		flagBox.style.display = 'none';
		box.style.display = 'none';
		box.innerHTML = "";
	}
}

function leftClick(dom) {
	var isLei = document.getElementsByClassName('isLei');
	if(dom && dom.classList.contains('isLei')) {
		console.log('gameOver');
		for(var i = 0; i < isLei.length; i++) {
			isLei[i].classList.add('show');
		}
		setTimeout(function() {
			alertBox.style.display = 'block';
			alertImg.style.backgroundImage = 'url("img/over.jpg")';
		}, 800);
	} else {
		var n = 0;
		var posAtt = dom && dom.getAttribute('id').split('-');
		var posX = posAtt && +posAtt[0];
		var posY = posAtt && +posAtt[1];
		dom && dom.classList.add('num');
		
		for (var i = posX - 1; i <= posX + 1; i++) {
			for (var j = posY - 1; j <= posY + 1; j++) {
				var aroundBox = document.getElementById(i + '-' + j);
				if(aroundBox && aroundBox.classList.contains('isLei')){
					n++;
				}
			}
		}
		
		dom && (dom.innerHTML = n)
		if(n == 0){
			for (var i = posX - 1; i <= posX + 1; i++) {
				for (var j = posY - 1; j <= posY + 1; j++) {
					var nearBox = document.getElementById(i + '-' + j);
					if(nearBox && !nearBox.classList.contains('flag')){
						if(!nearBox.classList.contains('check')){
							nearBox.classList.add('check');
							leftClick(nearBox);
						}
					}
				}
			}
		}
		
	}
}

function rightClick(dom) {
	if(dom.classList.contains('num')){
		return;
	}
	
	dom.classList.toggle('flag');
	if(dom.classList.contains('isLei') && dom.classList.contains('flag')){
		mineOver --;	
		score.innerHTML = mineOver;
	}
	
	if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){
		mineOver ++;	
	}
	
	
	if(mineOver == 0){
		alertBox.style.display = 'block';
			alertImg.style.backgroundImage = 'url("img/success.png")';
	}
	
}

/*
 * 
 */
function init() {
	minesNum = 10;
	mineOver = 10;
	score.innerHTML = mineOver;
	box.innerHTML ="";
	for(var i = 0; i < 10; i++) {
		for(var j = 0; j < 10; j++) {
			var conn = document.createElement('div');
			conn.classList.add('block');
			conn.setAttribute('id', i + "-" + j);
			box.appendChild(conn);
			minMap.push({
				mine: 0
			});
		}
	}

	block = document.getElementsByClassName('block');
	while(minesNum) {
		var mineIndex = Math.floor(Math.random() * 100);
		if(minMap[mineIndex].mine === 0) {
			minMap[mineIndex].mine = 1;
			block[mineIndex].classList.add('isLei');
			minesNum--;
		}

	}
}